<template>
  <v-layout type="main">

    <div class="detail-box">
      <div class="rollback" @click="$router.push('/market')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="code-desc-header">
          <div class="title">
            <div class="title-header">
              <span>{{ detailData.name }}</span>
            </div>

            <div class="code-tags">
              <div class="user-tag tag">
                <img src="~@/assets/img/user.png" alt="">
                {{
                  detailData.create_user && (detailData.create_user.nick_name ||
                    detailData.create_user.username)
                }}
              </div>

              <div class="time-tag tag">
                <span>开始时间：</span>
                {{ detailData.create_time }}
              </div>

              <div class="time-tag tag">
                <span>更新时间：</span>
                {{ detailData.update_time }}
              </div>
            </div>

          </div>

          <div class="code-status" v-if="typeof detailData.status === 'string'">
            <plug-state :statusStr="detailData.status" />
          </div>
        </div>
      </div>
    </div>

    <div class="select-ver clearfix" v-if="active == 1 || active == 2">
      <span class="label">版本</span>
      <el-select v-model="version" class="select" value-key="id" @change="versionChange">
        <el-option v-for="item in versionOptions" :value="item" :label="item.version" :key="item.id">
        </el-option>
      </el-select>
      <a class="handle-btn" href="javascript:;" v-if="active == 1 || active == 2" @click="fork">Fork</a>
    </div>

    <!-- <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike" v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.meta.title }}</span>
      </el-radio-button>
    </el-radio-group> -->
    <!-- <el-radio-group v-model="nowRouter" size="medium" class="nav-alike" v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.id" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.name }}</span>
      </el-radio-button>
    </el-radio-group> -->

    <!-- <div class="tabs-box"> -->
    <!-- <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs> -->
    <!-- </div> -->

    <div class="tabs-left">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs>
    </div>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view v-if="ready" class="content-detail" :version="version" :detailData="detailData" :source="source"
        :active="active" :nowRouter="nowRouter" />
    </div>
  </v-layout>
</template>

<script>

import { getMarketAlgorithmDetail } from '@/api/marketAlgorithm'
import { getMarketDataSetDetail } from '@/api/marketDataset'
import { getMarketModelDetail } from '@/api/marketModel'
import { getAllMarketAlgorithmVersions, getMarketAlgorithmPreviewVersionDetail, getMarketAlgorithmVersionDetail } from '@/api/marketAlgorithmVersion'
import { getAllMarketModelVersions } from '@/api/marketModelVersion'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: {},
      source: null,
      versionOptions: [],
      version: null,
      active: this.$route.query.active,
      preview: this.$route.query.preview,
      id: this.$route.query.id,
      ready: false,
      pageTitle: {
        '0': '数据集',
        '1': '算法',
        '2': '模型',
      },
      visible: false
    };
  },
  methods: {
    skip() {
      let path = `/market/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          ...this.$route.query
        }
      })
    },
    async getVersions() {
      if (this.active == 1) {
        let ret = await getAllMarketAlgorithmVersions({ algorithmId: this.$route.query.id })
        this.versionOptions = ret.data
        if (this.versionOptions.length > 0) {
          this.version = this.versionOptions[0]
        }
      }
      if (this.active == 2) {
        let ret = await getAllMarketModelVersions({ modelId: this.$route.query.id })
        this.versionOptions = ret.data
        if (this.versionOptions.length > 0) {
          this.version = this.versionOptions[0]
        }
      }
      this.ready = true
    },
    versionChange() {
    },
    async getDetail() {
      if (this.$route.query.id) {
        console.log('active', this.active)
        // await this.getVersions()
        // console.log("versions", this.versionOptions)
        if (this.active == 0) {
          console.log('getDetail', this.active)
          let res = await getMarketDataSetDetail({ id: this.$route.query.id })
          this.detailData = res.data
          this.source = this.detailData.source
        }
        if (this.active == 1) {
          let res = await getMarketAlgorithmDetail({ id: this.$route.query.id })
          this.detailData = res.data
          let version_id = this.$route.query.version_id
          if (version_id) {
            let versionRes = null;
            if (this.preview) {
              versionRes = await getMarketAlgorithmPreviewVersionDetail({ id: version_id })
            } else {
              versionRes = await getMarketAlgorithmVersionDetail({ id: version_id })
            }
            this.version = versionRes.data
            if (this.preview) {
              this.versionOptions.push(this.version)
            }
          }
        }
        if (this.active == 2) {
          let res = await getMarketModelDetail({ id: this.$route.query.id })
          this.detailData = res.data
        }
      }
      return
    },
    async fork() {
      console.log('active', this.active)
      if (this.active == 0) {
        console.log('aaaa')
      }
      if (!this.version) {
        this.$message.error('暂无版本数据')
        return
      }
      if (this.active == 1) {
        let query = {
          algorithmVersion_id: this.version.id,
          algorithm_name: this.detailData.name,
          algorithm_desc: this.detailData.desc,
          algorithm_avatar: this.detailData.avatar,
        }
        this.$router.push({
          path: '/notebook/detail',
          query
        })
      }
      if (this.active == 2) {
        let query = {
          market_model_id: this.detailData.id,
          market_model_version_id: this.version.id
        }
        this.$router.push({
          path: '/model/detail',
          query
        })
      }
    },

  },
  async mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'market' && e.children
    )
    // console.log('query', this.$route.query)
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    await this.getDetail()
    this.getVersions()
  },

  destroyed() {

  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";

.handle-btn {
  min-width: 55px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background: #7872F6;
  border-radius: 4px;
  margin: .3125rem 0 0 .5rem;
  float: left;
  padding: 0 12px;
  text-align: center;
  color: #FFF;
}
</style>